<template>
  <div class="bg-white rounded-lg shadow-sm p-6 resume-section relative">
    <div class="flex justify-between items-start mb-6">
      <h2 class="text-xl font-semibold text-gray-800">证书奖项</h2>
      <button v-if="!editMode" class="edit-btn p-2 rounded-full hover:bg-gray-100 opacity-0 group-hover:opacity-100">
        <i class="ri-pencil-line text-gray-500"></i>
      </button>
    </div>
    
    <div class="grid grid-cols-2 gap-4">
      <div v-for="(certificate, index) in certificates" :key="index" class="p-4 border border-gray-100 rounded-lg hover:shadow-sm transition">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-yellow-50 rounded-full flex items-center justify-center mr-3">
            <i class="ri-award-line text-yellow-500"></i>
          </div>
          <div class="flex-1">
            <h3 v-if="!editMode" class="font-medium text-gray-800">{{ certificate.name }}</h3>
            <input v-else v-model="certificate.name" type="text" class="font-medium text-gray-800 bg-transparent border-b border-gray-300 focus:border-primary outline-none w-full" placeholder="证书名称">
            
            <div v-if="!editMode" class="text-gray-500 mt-1">{{ certificate.date }}</div>
            <input v-else v-model="certificate.date" type="text" class="text-gray-500 mt-1 bg-transparent border-b border-gray-300 focus:border-primary outline-none" placeholder="获得时间">
          </div>
          <button v-if="editMode" @click="removeCertificate(index)" class="text-red-500 hover:text-red-700 ml-2">
            <i class="ri-delete-bin-line"></i>
          </button>
        </div>
      </div>
      
      <button v-if="editMode" @click="addCertificate" class="p-4 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-primary hover:text-primary flex items-center justify-center">
        <i class="ri-add-line mr-1"></i>添加证书
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  editMode: boolean
}

defineProps<Props>()

const certificates = ref([
  { name: 'PMP项目管理专业人士认证', date: '2021年获得' },
  { name: 'Google数字营销认证', date: '2020年获得' },
  { name: '优秀产品经理', date: '小红书 2019年度' },
  { name: '优秀毕业生', date: '上海交通大学 2020年' }
])

const addCertificate = () => {
  certificates.value.push({ name: '', date: '' })
}

const removeCertificate = (index: number) => {
  certificates.value.splice(index, 1)
}
</script>
